<template>
  <a-modal
    popup-container=".page-container"
    @cancel="close"
    :width="656"
    title="新增车型"
    :visible="visible"
    :body-style="{ 'padding-bottom': '10px' }"
    unmount-on-close
  >
    <page-form :model="form" :rules="rules" class="page-form" div="true" layout="vertical" ref="formRef">
      <a-row>
        <a-col span="11">
          <page-form-item label="品牌" field="brandId" required size="1">
            <remote-select
              v-model="form.brandId"
              type="car_brand_saasList"
              :params="{
                id: form.brandId,
              }"
              @change="brandChange"
            />
          </page-form-item>
        </a-col>
        <a-col span="2" />
        <a-col span="11">
          <page-form-item label="车系" field="seriesId" required size="1">
            <remote-select
              v-model="form.seriesId"
              :params="{
                brandId: form.brandId,
                id: form.seriesId,
              }"
              type="car_series_saasList"
              @change="seriesChange"
            />
          </page-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col span="11">
          <page-form-item label="车型" field="modelId" required size="1">
            <remote-select
              v-model="form.modelId"
              :params="{
                brandId: form.brandId,
                seriesId: form.seriesId,
              }"
              type="car_model_saasList"
              @change="modelChange"
            />
          </page-form-item>
        </a-col>
      </a-row>
      <a-divider class="divider" />
      <page-form-item label="车型库信息" size="1" style="margin-bottom: 0">
        <div class="car-model-wrapper">
          <div class="clear-both car-model-detail">
            <div class="float-left car-model-img">
              <template v-if="vehicleModelDetail?.modelImgList">
                <a-image :src="`${imgBaseSrc}${vehicleModelDetail?.modelImgList[0]}`" width="138" height="138" fit="contain" />
              </template>
              <template v-else>
                <div class="car-model-img-empty">
                  <a-empty />
                </div>
              </template>
            </div>
            <div class="float-left car-model-descriptions">
              <a-descriptions :align="{ label: 'right' }" layout="inline-horizontal" :column="2">
                <a-descriptions-item label="品牌">{{ vehicleModelDetail?.modelBrand }}</a-descriptions-item>
                <a-descriptions-item label="车系">{{ vehicleModelDetail?.seriesName }}</a-descriptions-item>
                <a-descriptions-item label="车型" :span="2">{{ vehicleModelDetail?.modelName }}</a-descriptions-item>
                <a-descriptions-item label="年款">{{ vehicleModelDetail?.yearStyleName }}</a-descriptions-item>
                <a-descriptions-item label="排量">{{ vehicleModelDetail?.outputVolume }}</a-descriptions-item>
                <a-descriptions-item label="变速箱">{{ vehicleModelDetail?.gearboxTypeStr }}</a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </div>
      </page-form-item>
    </page-form>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="handleOkFn" :loading="loading">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="CarManageFormCarModelNewModal">
  import { ref } from 'vue'
  import { getCarModelAdd, getStandardCarModelDetail } from '@/api/asset/carModel'
  import { Notification } from '@arco-design/web-vue'
  const emit = defineEmits(['success'])
  const visible = ref(false)
  const loading = ref(false)
  const form = ref({})
  const imgBaseSrc = `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/`
  const rules = {
    brandId: [{ required: true, message: '请选择品牌', trigger: 'change' }],
    seriesId: [{ required: true, message: '请选择车系', trigger: 'change' }],
    modelId: [{ required: true, message: '请选择车型名称', trigger: 'change' }],
  }

  // 品牌change
  const brandChange = () => {
    form.value.seriesId = undefined
    form.value.modelId = undefined
    form.value.modelName = undefined
    formRef.value.clearValidate()

    getSysCarModelDetailFn()
  }
  // 车系change
  const seriesChange = (val, option) => {
    // 清空不反选
    if (val) {
      form.value.brandId = option.brandId
    }
    form.value.modelId = undefined
    form.value.modelName = undefined
    // 清空检验
    formRef.value.clearValidate()
    getSysCarModelDetailFn()
  }
  // 车型change
  const modelChange = (val, option) => {
    // 反选上级，清空不反选
    if (val) {
      form.value.brandId = option.brandId
      form.value.seriesId = option.seriesId
    }
    form.value.modelName = option.modelName
    // 清空检验
    formRef.value.clearValidate()
    getSysCarModelDetailFn(val)
  }

  const open = () => {
    visible.value = true
    // 清空弹窗
    form.value = {}
    vehicleModelDetail.value = null
  }
  const close = () => {
    visible.value = false
  }
  const formRef = ref(null)
  const handleOkFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        const param = {
          modelId: form.value.modelId,
          modelName: vehicleModelDetail.value.modelName,
        }
        getCarModelAdd(param).then((res) => {
          Notification.success({
            content: '保存成功',
            closable: true,
            duration: 10000,
          })
          // 将车型 id 传到父组件
          const result = res.result
          const id = result.id
          emit('success', id)
          close()
        })
      }
    })
  }
  // 获取车型详情
  const vehicleModelDetail = ref()
  const spining = ref(false)
  const getSysCarModelDetailFn = (id) => {
    if (!id) {
      vehicleModelDetail.value = {}
      return
    }
    // 标准库车型详情
    spining.value = true
    getStandardCarModelDetail({ id })
      .then((res) => {
        spining.value = false
        if (res.code == 200) {
          vehicleModelDetail.value = res.result
        }
      })
      .catch(() => {
        spining.value = false
      })
  }

  defineExpose({
    open,
  })
</script>
<style lang="less" scoped>
  .divider {
    margin: 0px 0px 10px;
    border-bottom: 1px solid #f2f3f5ff;
  }
  :deep(.arco-modal-body) {
    padding: 24px 20px 10px;
  }
  .car-model-wrapper {
    width: 100%;
    padding-top: 4px;
    .car-model-detail {
      width: 100%;
      .car-model-img {
        width: 140px;
        height: 140px;
        text-align: center;
        border: 1px solid #e5e6eb;
        background: #f2f3f5;
        border-radius: 2px 2px 2px 2px;
        .car-model-img-empty {
          margin-top: 18px;
          :deep(svg) {
            font-size: 32px;
          }
        }
      }
      .car-model-descriptions {
        width: calc(100% - 160px);
        margin-left: 20px;
      }
    }
  }
  :deep(.arco-descriptions-item) {
    margin-bottom: 10px;
  }
  :deep(.arco-descriptions-item-label) {
    vertical-align: top;
  }
  :deep(.arco-descriptions-item-value) {
    max-width: calc(100% - 46px);
    margin-bottom: 16px;
  }
</style>
